<template>
  <div class="layout-pd">
    <zh-card title="">
      <zh-form ref="appForm" :model="state.queryParam" >
        <zh-form-input prop="appId" label="应用ID" placeholder="请输入应用ID" v-model="state.queryParam.appId"></zh-form-input>
        <zh-form-input prop="appName" label="应用名称" placeholder="请输入应用名称" v-model="state.queryParam.appName"></zh-form-input>
        <zh-form-select prop="status" label="应用状态" :options="state.statusDict" v-model="state.queryParam.status"></zh-form-select>
        <zh-form-query v-model="state.advanced" :form-ref="appForm" :table-ref="appTable">
          <zh-button style="margin-left: 8px" button-type="add" @click="openAddApp()">添加应用</zh-button>
        </zh-form-query>
      </zh-form>
    </zh-card>
    <zh-table
        ref="appTable"
        title=""
        funcCode="application0001"
        :columns="state.tableColumn"
        :disabled="false"
        highlight-current-row
    >
      <template #type_default="{ row }">
        {{typeMap[row.type]?.text}}
      </template>
      <template #status_default="{ row }">
        <zh-badge v-if="row.status" :status="statusMap[row.status]?.status" :text="statusMap[row.status]?.text" />
      </template>
      <template #ckeckToken_default="{ row }">
        <zh-badge v-if="row.ckeckToken" :status="flagMap[row.ckeckToken]?.status" :text="flagMap[row.ckeckToken]?.text" />
      </template>
      <template #checkScope_default="{ row }">
        <zh-badge v-if="row.checkScope" :status="flagMap[row.checkScope]?.status" :text="flagMap[row.checkScope]?.text" />
      </template>
      <template #publicFlag_default="{ row }">
        <zh-badge v-if="row.publicFlag" :status="flagMap[row.publicFlag]?.status" :text="flagMap[row.publicFlag]?.text" />
      </template>
      <template #signFlag_default="{ row }">
        <zh-badge v-if="row.signFlag" :status="flagMap[row.signFlag]?.status" :text="flagMap[row.signFlag]?.text" />
      </template>
      <template #encryptionFlag_default="{ row }">
        <zh-badge v-if="row.encryptionFlag" :status="flagMap[row.encryptionFlag]?.status" :text="flagMap[row.encryptionFlag]?.text" />
      </template>
      <template #authStatus_default="{ row }">
        <zh-badge status="processing" text="待审核" v-if="row.authStatus === '0'" />
        <zh-badge status="success" text="审核通过" v-if="row.authStatus === '1'" />
        <zh-badge color="red" text="审核不通过" v-if="row.authStatus === '2'" />
      </template>
      <template #operate_default="{ row }">
        <el-tooltip
            effect="dark"
            content="查看信息"
            placement="top"

        >
          <zh-button v-func:application0002 button-type="query" link @click="openQueryApp(row)"></zh-button>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            content="修改信息"
            placement="top"

        >
          <zh-button v-func:application0005 button-type="edit" link @click="openEditApp(row)"></zh-button>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            content="删除信息"
            placement="top"

        >
          <zh-button v-func:application0006 button-type="del" link @click="delApp(row)"></zh-button>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            content="重新生成秘钥"
            placement="top"

        >
          <zh-button v-func:application0007 icon="ele-Tools" link @click="openSecret(row)"></zh-button>
        </el-tooltip>
      </template>
    </zh-table>
    <zh-dialog :title="state.modalTitle"  width="90%" v-model="state.visible" >
      <AppForm ref="appFormPage" v-model="state.visible" :showFlag="state.showFlag" :appInfo="state.selectRow" />
      <template #footer>
				<span class="dialog-footer">
				<el-button @click="onClose">{{state.showFlag?'关闭':'取消'}}</el-button>
				<el-button v-if="!state.showFlag" type="primary" @click="saveApp">
					保存
				</el-button>
				</span>
      </template>
    </zh-dialog>
  </div>
</template>
<script lang="ts" setup name="appManager">
import { ElMessage,ElMessageBox } from 'element-plus';
import AppForm from './component/appForm.vue';
//------------------内部变量定义-------------------------
const typeMap = {
  '1': {
    text: '电脑端应用',
  },
  '2': {
    text: '手机端应用',
  },
};
const statusMap = {
  0: {
    status: 'error',
    text: '禁用',
  },
  1: {
    status: 'processing',
    text: '启用',
  },
};
const flagMap = {
  0: {
    status: 'default',
    text: '否',
  },
  1: {
    status: 'success',
    text: '是',
  },
};
let appForm=ref();
let appFormPage=ref();
let appTable=ref();
const state = reactive({
  modalTitle:'应用详情',
  showFlag:true,
  selectRow:{},
  visible:false,
  advanced:true,
  queryParam:{} as any,
  statusDict: [
    {
      dictKey: '0',
      dictValue: '禁用',
    },
    {
      dictKey: '1',
      dictValue: '启用',
    },
  ],
  tableColumn:[
    { type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号' },
    { field: 'appId', title: '应用ID', fixed: 'left', visible: false, align: 'center', width: 150 },
    { field: 'appName', title: '应用名称', align: 'center', width: 300 },
    { field: 'type', title: '应用类别', align: 'center', width: 100,	slots: {
        default: 'type_default',
      }, },
    {
      field: 'status',
      title: '应用状态',
      align: 'center',
      width: 80,
      slots: {
        default: 'status_default',
      },
    },
    {
      field: 'authStatus',
      title: '审核状态',
      align: 'center',
      width: 80,
      slots: {
        default: 'authStatus_default',
      },
    },
    { field: 'keyAlgorithm', title: '加密算法类型', align: 'center', width: 120 },
    { field: 'clientSecretExpiresAt', title: '秘钥过期时间点', align: 'center', width: 150 },
    { field: 'qps', title: '每秒并发数', align: 'center', width: 80 },
    { field: 'ckeckToken', title: '是否校验token', align: 'center', width: 80,
      slots: {
        default: 'ckeckToken_default',
      },
    },
    { field: 'checkScope', title: '是否校验权限', align: 'center', width: 80,
      slots: {
        default: 'checkScope_default',
      },
    },
    { field: 'publicFlag', title: '是否公共应用', align: 'center', width: 80,
      slots: {
        default: 'publicFlag_default',
      },
    },
    { field: 'signFlag', title: '是否需要签名', align: 'center', width: 80,
      slots: {
        default: 'signFlag_default',
      },
    },
    { field: 'encryptionFlag', title: '是否需要加密', align: 'center', width: 80,
      slots: {
        default: 'encryptionFlag_default',
      },
    },
    { field: 'orderNo', title: '排序号', align: 'center', width: 120 },
    { field: 'tokenTime', title: 'token有效时间', align: 'center', width: 100 },
    { field: 'refreshTokenTime', title: '刷新token有效时间', align: 'center', width: 100 },
    { field: 'whiteIp', title: 'ip白名单', align: 'center', width: 300 },
    { field: 'remarks', title: '备注', align: 'center', width: 300 },
    { field: 'operate', title: '操作', align: 'center',fixed: 'right',  width: 220,slots: {default: 'operate_default'}},
  ]
})



//--------------------------方法-----------------------------------
const openQueryApp=(row)=>{
  //打开查看详情
  state.modalTitle='应用详情';
  state.selectRow=row;
  state.showFlag=true;
  state.visible=true;
}

const openAddApp=()=>{
  //打开查新增
  state.modalTitle='添加应用';
  let params={}
  state.selectRow=params;
  state.showFlag=false;
  state.visible=true;
}
const openEditApp=(row)=>{
  //打开查编辑
  state.modalTitle='修改应用';
  state.selectRow=row;
  state.showFlag=false;
  state.visible=true;
}
const delApp=(row)=>{
  //删除
  ElMessageBox.confirm(
      '是否确认删除应用，删除后不可恢复?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        let params={appId:row.appId}
        $api.common.send.post('application0006',params).then(()=>{
          ElMessage.success('删除成功！');
          refreshTable();
        });
      })
      .catch(() => {

      })
}
const openSecret=(row)=>{
  //打开查设置秘钥
  ElMessageBox.confirm(
      '是否确认重新设置应用秘钥，设置后原秘钥不可用?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        let params={appId:row.appId}
        $api.common.send.post('application0007',params).then(()=>{
          ElMessage.success('重新设置秘钥成功！');
          refreshTable();
        });
      })
}

const saveApp=()=>{
  //保存应用信息
  appFormPage.value.save().then(() => {
    refreshTable();
  });
}
const onClose=()=>{
  state.visible = false;
}
const refreshTable=()=>{
  appTable.value.refresh(state.queryParam)
}
</script>